import React from 'react'
import { Input } from 'antd-mobile';
import { Button, SearchBar, Space, Toast,Dialog } from 'antd-mobile'
import { useState } from 'react';
import Item from 'antd-mobile/es/components/dropdown/item';
import { useNavigate } from 'react-router-dom';
import { useEffect } from 'react';
import axios from 'axios';
export default function Dong() {
    const [dong,setdong]=useState("最新动态")
    const [list,setlist]=useState([
        {id:1,tou:'../imgs/树.png' ,name:'来一起早起跑步，多少点阳光，多些活力',tu:'../imgs/树.png' ,username:'每户的毛'},
    ,        {id:1,tou:'../imgs/树.png' ,name:'来一起早起跑步，多少点阳光，多些活力',tu:'../imgs/树.png' ,username:'每户的毛'},
,        {id:1,tou:'../imgs/树.png' ,name:'来一起早起跑步，多少点阳光，多些活力',tu:'../imgs/树.png' ,username:'每户的毛'},
,        {id:1,tou:'../imgs/树.png' ,name:'来一起早起跑步，多少点阳光，多些活力',tu:'../imgs/树.png' ,username:'每户的毛'},
,        {id:1,tou:'../imgs/树.png' ,name:'来一起早起跑步，多少点阳光，多些活力',tu:'../imgs/树.png' ,username:'每户的毛'},

    ])
    const [list1,setlist1]=useState([

    ])
    const getlist=async()=>{
      let {data}=await axios.get('http://localhost:3000/getlist')
      setlist1(data.list)
    }
    useEffect(()=>{
      getlist()
    
    },[])
    const [fl,setfl]=useState(0)
    const ll=()=>{
     
            Dialog.alert({
            
                content: <div>
                  <p>用于向你推荐附近的动态、约跑，不授权该权限可相会影响app的使用体验:</p>
                </div>,
                  title: '允许“校园跑”使用你的位置？',
              image:
                'https://cdn7.axureshop.com/demo2024/2268035/images/%E4%BD%8D%E7%BD%AE%E6%8E%88%E6%9D%83/u398.png',
            
              actions:[        
                {text:'允许一次',key:'online',onClick:()=>{onclose()}},
                {text:'不允许',key:'ok'},
                {text:'使用APP时允许',key:'ok'}
              ]
            
            })
    
    }
    const Navigate=useNavigate()
  return (
    <div >
            <SearchBar onFocus={() => Navigate('/search')} style={{width:'360px',borderRadius:'20px',marginLeft:'5px'}} placeholder='搜索动态关键字' />
        <p>   
            {/* <input placeholder='搜索动态关键字' 
        style={{width:'360px',height:'22px',borderRadius:'20px',paddingLeft:'10px'
        }}
        onClick={()=>{
            Navigate('/search')
        }} ></input> */}
        
        </p>
        <div style={{marginTop:'10px',marginLeft:'-5px'}}>
            <div style={{width:'75px',display:'inline-block',marginLeft:'15px',
            backgroundImage:"url(https://cdn7.axureshop.com/demo2024/2268035/images/%E6%9C%80%E6%96%B0%E5%8A%A8%E6%80%81/u230.svg)",
                textAlign:'center',lineHeight:'70px',height:'70px',borderRadius:'10px',backgroundColor:'red'}}>
                <p style={{color:'white'}} onClick={()=>{
                  console.log(list1)
                }}>#每日打卡#</p>
            </div>
            <div style={{width:'75px',display:'inline-block',marginLeft:'15px',
              backgroundImage:"url(https://cdn7.axureshop.com/demo2024/2268035/images/%E6%9C%80%E6%96%B0%E5%8A%A8%E6%80%81/u227.svg)",
                textAlign:'center',lineHeight:'70px',height:'70px',borderRadius:'10px',backgroundColor:'red'}}>
             <p style={{color:'white'}}>#运动健身#</p>
            </div>
            <div style={{width:'75px',display:'inline-block',marginLeft:'15px',
              backgroundImage:"url(https://cdn7.axureshop.com/demo2024/2268035/images/%E6%9C%80%E6%96%B0%E5%8A%A8%E6%80%81/u228.svg)",
                textAlign:'center',lineHeight:'70px',height:'70px',borderRadius:'10px',backgroundColor:'red'}}>
                <p style={{color:'white'}}>#校园夜跑#</p>
            </div>
            <div style={{width:'75px',display:'inline-block',marginLeft:'15px',
              backgroundImage:"url(https://cdn7.axureshop.com/demo2024/2268035/images/%E6%9C%80%E6%96%B0%E5%8A%A8%E6%80%81/u229.svg)",
                textAlign:'center',lineHeight:'70px',height:'70px',borderRadius:'10px',backgroundColor:'red'}}>
                <p style={{color:'white'}}>#释放压力#</p>
            </div>
        </div>
        <div style={{marginTop:'14px',marginLeft:'10px',marginBottom:'15px'}}>
            <span style={{display:'inline-block',color:dong=="最新动态"?"black":"gray",fontWeight:dong=="最新动态"?"bold":""}} onClick={()=>{
                setdong("最新动态")
            }}>最新动态</span>
            <span style={{display:'inline-block',color:dong=="附近动态"?"black":"gray",fontWeight:dong=="附近动态"?"bold":"",marginLeft:'5px'}} onClick={()=>{
                setdong("附近动态")
                ll()
            }}>附近动态</span>
        </div>
        <div style={{backgroundColor:'rgb(247,247,247)',width:'99vw',height:'100vh',marginLeft:'-10px'}}>
            {list1.map(item=>{
                return   <div onClick={()=>{
                    Navigate(`/app/dan/${item._id}`)
                }} style={{width:'38%',height:'230px',display:'inline-block',margin:'15px'
                  ,backgroundColor:'white',paddingBottom:"5px",paddingLeft:'5px',paddingRight:'5px',borderRadius:'5px'
                  
                }}>
                <p ><img src={item.img} style={{width:'100%',borderTopLeftRadius:'10px',borderTopRightRadius:'10px',height:'100%'}}></img></p>
                <p>{item.test}</p>
                <p style={{marginTop:'16px'}}>
                    
                    <img src={item.img} style={{width:'20px',float:'left',height:'20px',borderRadius:'50%'}}></img>
                    <span>{item.name}</span>
                    <span style={{float:'right'}}>{item.praisenum} 👍</span>
                </p>
            
            </div>
            })}
          
            
        </div>
    </div>
  )
}
